<template>
  <div class="borrowing">
    <div>
      <download-excel
    class   = "btn btn-default"
    :data   = "json_data"
    :fields = "json_fields"
    name    = "filename.xls">
        <el-button type="success" style="margin-left: 1091px" @click="onchicks">导出</el-button>
      </download-excel>

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="企业名">
          <el-input
            v-model="formInline.plname"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="社会信用代码">
          <el-input v-model="formInline.plnumber" placeholder=""> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 120%">
        <el-table-column fixed prop="plid" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="plname" label="企业名称" width="150">
        </el-table-column>
        <el-table-column prop="plnumber" label="社会信用代码" width="200">
        </el-table-column>
        <el-table-column prop="plmoney" label="注册资本" width="100">
        </el-table-column>
        <el-table-column prop="salesman" label="业务员" width="80">
        </el-table-column>
        <el-table-column prop="plstate" label="流程状态" width="120">
        </el-table-column>
        <el-table-column prop="pldate" label="任务开始时间" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[1, 2, 3, 4,6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRecord"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 1,
      totalRecord: this.totalRecord,
      currentPage4: 1,
      tableData: [],
      formInline: {
        user: "",
        region: "",
      },
      json_fields: {
        //生成excel的字段：导出数据的字段
        序号: "plid",
        企业名称: "plname",
        社会信用代码: "plnumber",
        注册资本: "plmoney",
        业务员: "salesman",
        流程状态: "plstate",
        任务开始时间: "pldate",
      },
      json_data: [
        {
          plid: "1",
          plname: "ABC有限公司",
          plnumber: "91110000100010433L",
          plmoney: "10000000",
          salesman: "张三",
          plstate: "2",
          pldate: "2021-11-15 09:51:37",
        },
        {
          plid: "2",
          plname: "BBC有限公司",
          plnumber: "911100001000",
          plmoney: "1000000",
          salesman: "李四",
          plstate: "2",
          pldate: "2021-11-15 11:55:09",
        },
      ],
    };
  },

  created() {
    this.init();
  },

  methods: {
    onSubmit() {
      console.log("submit!");
      this.$axios
        .get("http://localhost:8082/preloan/selectByname", {
          params: {
            plname: this.formInline.plname,
            plnumber: this.formInline.plnumber,
          },
        })
        .then((resp) => {
          this.tableData = resp.data.data;
          console.log(resp);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.init();
    },

    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${val}`);
      this.init();
    },

    handleClick(index,row) {
      this.$router.push("/detailed");
    //  this.$refs.detailed.init(row);
      console.log(row);
    },
    init() {
      this.$axios
        .get("http://localhost:8082/preloan/selectAll", {
          params: {
            pageIndex: this.currentPage4,
            pageSize: this.pageSize,
          },
        })
        .then((resp) => {
          this.tableData = resp.data.data.beanList;
          this.totalRecord = resp.data.data.totalRecord;
          console.log(resp);
        });
    },
    onchicks() {
      this.json_data = this.tableData;
    },
  },
};
</script>

<style >
.block {
  position: relative;
  left: 350px;
  height: 500px;
  width: 1000px;
}
</style>




